<template>
	<div class="user-answer">
	  <table>
	    <thead>
	      <tr><th colspan="99">用户答案</th></tr>
	      <tr class="header-td"><td class="question">问题</td><td>答案</td></tr>
	    </thead>
	    <tbody>
	      <tr v-for="(item, index) in answerData" :key="index" class="fontstyle" style="text-align: left">
	        <td style="padding-left: 10px">
	          {{ item.sort + 1 }}.{{ item.question }}
	        </td>
	        <td style="padding-left: 10px">{{ item.tag }}、{{ item.answer }}</td>
	      </tr>
	    </tbody>
	  </table>
	</div>
</template>

<script setup lang="ts">
	
	defineProps({
	  answerData: {
	    type: Array as any,
	    default() {
	      return [];
	    }
	  }
	});
</script>

<style lang="less" scoped>
	table {
	  width: 100%;
	  border-collapse: collapse;
	
	  tr, th,td {
	    border: 2px solid #1abb73;
	  }
	
	  th,td {
	    padding: 10px 0;
	  }
	
	  thead {
	    tr {
	      &:first-child {
	        font-size: 16px;
	        font-weight: bold;
	        color: #1abb73;
	        text-align: center;
	        padding: 10px 0;
	      }
	    }
	  }
	
	  .header-td {
	    background: rgba(26, 187, 115, 0.2);
	    text-align: center;
	  }
	
	  .contentd {
	    font-size: 16px;
	    font-weight: bold;
	  }
	}
	.user-answer {
	  margin-bottom: 20px;
	  text-align: center;
	  font-size: 16px;
	
	  .header-td {
	    .question {
	      width: 75%;
	    }
	  }
	}
</style>